<!--
作者：刘洮君
描述：结业小组页面
修改人：刘洮君
-->
<template>
  <div class="contentBody">
    <!-- 查询类型框 -->
    <div class="bodyHead">
      <!-- 查看未结业分组 -->
      <router-link to="/unfinishedTeam">
          <el-button type="primary" id="graduated">查看未结业小组</el-button>
      </router-link>
      <p>
        <!-- 小组名称 -->
        <label>小组名称:</label>
        <select name="" id="teamNameSelect" value="teamName">
            <option value="teamName" disabled>小组名称</option>
        </select>
      </p>
      <p>
        <!-- 学员姓名 -->
        <label>学员姓名:</label><input type="text">
      </p>
      <p>
        <!-- 学号 -->
        <label>学号:</label><input type="text">
     </p>
      <!-- 查询和重置 -->
      <el-button type="primary" id="search">查询</el-button>
      <el-button type="primary" id="reSet">重置</el-button>
    </div>
    <!--主体部分  -->
    <div class="bodyMid">
      <!-- 功能按钮 -->
      <el-button type="primary" id="teamSituation">考勤实训组3</el-button>
      <el-button type="primary" id="icon" @click="dialogTeamListVisible = true"></el-button>
      <!-- 项目分组弹窗 -->
      <el-dialog v-model="dialogTeamListVisible" 
      width="30%" custom-class="dialogAdd">
          <h1>项目分组</h1>
          <hr class="linear">
          <div class="linearCover"></div>
           <!-- 搜索框 -->
            <!-- 小组名称 -->
          <el-input
            v-model="teamSearch"
            class="w-50 m-2 teamSearch"
            placeholder="请输入"
            :suffix-icon="Search"
          />
            <el-row class="tac">
              <el-col :span="24">
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo">
                    <el-menu-item index="1" >
                      <span>Navigator Offffffffffne</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                      <span>Navigator Two</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                      <span>Navigator Three</span>
                    </el-menu-item>
                  </el-menu>
                </el-col>
              </el-row>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogTeamListVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogTeamListVisible = false"
                >确定</el-button>
            </span>
          </template>
      </el-dialog>
      <!-- 表格 -->
      <el-table
        class="table"
        :data="tableData"
        style="width: 100%"
        :header-cell-style='{background:"#C2DAE2",color:"#606266"}'
        :row-class-name="tableRowClassName">
        <!-- 表头 -->
        <el-table-column prop="department" label="院系" width="100" />
        <el-table-column prop="major" label="专业" width="120" />
        <el-table-column prop="grade" label="年级" width="130" />
        <el-table-column prop="clazz" label="班级" width="120" />
        <el-table-column prop="clazzTeacher" label="班主任" width="120" />
        <el-table-column prop="studentName" label="学员姓名" width="140" />
        <el-table-column prop="studentNumber" label="学号" width="140" />
        <el-table-column prop="sex" label="性别" width="100" />
        <el-table-column prop="teamRole" label="项目角色" width="160">
            前端
        </el-table-column>
        <el-table-column prop="setHeadman" label="组长" width="100">
            √
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="bodyFoot"></div>
  </div>
</template>

<script>
import {Search  } from "@element-plus/icons-vue";
import { reactive,ref} from 'vue'
// 表格有关的
const tableDataRelateEffect = ()=> {
    const count = ref(0);
    // "外面的表格"表格数据
    const tableData = reactive([
  {
    checkedtr:false,
    department: "软件学院",
    major: "软件工程",
    grade: "2019级",
    clazz: "19软工10班",
    studentName: "小李子",
    studentNumber: "123456789",
    sex: "女",
    teamRole: "前端工程师",
    setHeadman: '1',
  },{
    checkedtr:false,
    department: "软件学院",
    major: "软件工程",
    grade: "2019级",
    clazz: "19软工10班",
    studentName: "小李子",
    studentNumber: "123456789",
    sex: "女",
    teamRole: "前端工程师",
    setHeadman: '2',
  },
]);
    
   

    // 设置表格行类名方法
    const tableRowClassName = ({ rowIndex}) => {
        if (rowIndex%2=== 1)  
        { 
          return 'warning-row';
        } else {
          return 'succse-row';
        }
      }
    // 设置表头类名方法
    const tableHeadClassName = () => {
          return 'heading'
      }

    
    return {
      count,
      tableData,
      tableRowClassName,tableHeadClassName,
    }
}
// 弹窗有关的
const dialogRelateEffect = () => {
  const dialogTeamListVisible = ref(false);

  return {
    dialogTeamListVisible,
  }
}
export default {
  name: "finishedTeam",
  // components: {Location},
  setup() {
    
    // 表格
    const {
      count,
      tableData,
      tableRowClassName,tableHeadClassName,
    } = tableDataRelateEffect();
    // 弹窗
    const {
      dialogTeamListVisible,
    } = dialogRelateEffect();

    return {
      // 表格
      count,tableData,
      tableRowClassName,tableHeadClassName,
      // 弹窗
      dialogTeamListVisible,
      Search,
    };
  },
};

</script>
<style>
/* 表格单行类名 */
.warning-row{
  background-color:#C2DAE2 !important; 
  border: 1px solid #000 !important;
}
/* 表格双行类名 */
.succse-row{
  border: 2px solid #070707 !important;
}
/* 增加小组弹窗 */
.dialogAdd{
      background-color: #e0eef2 !important;
      border-radius: 15px;
      
    }
.dialogAdd h1{
  position: relative;
  bottom:40px;
  color: #3e94ad;
}
.linear{
  width: 95%;
  height: 2px;
  background-color: #c6d4da;
  border: none;
  position: relative;
  bottom: 20px;
}
.linearCover{
  width: 25%;
  height: 8px;
  border-radius: 15px;
  background-color: #3e94ad;
  position: relative;
  bottom: 25px;
}


#searchStudent{
      width: 45px;
      height: 25px;
      background-color: #3e94ad;
      color: #fff;
      margin-left: 3px;
      border: none;
}
#reSetStudent{
      width: 45px;
      height: 25px;
      color: rgb(16, 15, 15);
      border: 1px solid rgb(203, 198, 198);
      background-color: #FFF;
}
.tip{
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #000;
  margin: auto;
  background-color: #c4e4ef;
  border-radius: 5px;
}

/* 项目分组弹窗 */
.btnShow{
  width: 150px;
  height: 56px;
}
.iconEdit{
  margin-left: 15px;
  margin-bottom: 13px;
  width: 30px;
  height: 30px;
  border: none;
  background: url('~@/assets/imgs/edit.png') center no-repeat;
  background-size: 20px 20px;
}
.iconAdd{
  width: 30px;
  height: 30px;
  border: none;
  margin-bottom: 13px;
  background: url('~@/assets/add.png') center no-repeat;
  background-size: 20px 20px;
}
.iconReduce{
  width: 30px;
  height: 30px;
  border: none;
  margin-bottom: 13px;
  background: url('~@/assets/reduce.png') center no-repeat;
  background-size: 20px 20px;
}
.teamSearch{
position: relative;
bottom: 15px;
}
</style>

<style lang="less" scoped>
// content内容
.contentBody {
  padding: 20px;
  margin-left: 30px;
  margin-top: 80px; 
  .bodyHead {
    width: 100%;
    height: 50px;
   
    // 查看未结业分组
    #graduated {
      width: 120px;
      height: 40px;
      color: rgb(16, 15, 15);
      border: 1px solid rgb(203, 198, 198);
      background-color: #FFF;
    }
    p{
        display: inline-block;
        width: 250px;
        height: 40px;
        margin-left: 20px;
       
        select,input{
            width: 150px;
            height: 36px;
            margin-left: 10px;
            border: 1px solid rgb(203, 198, 198);
            
            border-radius: 4px;
        }
    }
    
    
    // 查询按钮
    #search {
      width: 85px;
      height: 40px;
      background-color: #3e94ad;
      color: #fff;
      margin-left: 23px;
      border: none;
    }
    // 重置
    #reSet {
      margin-left: 20px;
      width: 80px;
      height: 40px;
      color: rgb(16, 15, 15);
      border: 1px solid rgb(203, 198, 198);
      background-color: #FFF;
    }
  }
  // 表格
  .bodyMid {
    margin-top: 20px;
    // 具体小组名称
    #teamSituation{
      width: 85px;
      height: 40px;
      color: #000;
      border-radius:5px 5px 0px 0px ;
      border: none;
      background-color: #C2DAE2;
      z-index: 5;

    }
    // 小组列表图标
   #icon{
      width: 30px;
      height: 30px;
      margin-left: 0px;
      margin-top: 10px;
      border:0;
      background: url(../../assets/teamBtn.png) no-repeat;
      background-size: 30px 30px;
   } 
    // 表格
    .table {
      font-size: 12px;
    }
  }

}
</style>